<!doctype html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no"/>
    <title>Cogo注册中心</title>

    <style>
        body, html {
            font-size: 100%;
            padding: 0;
            margin: 0;
        }

        /* Reset */
        *,
        *:after,
        *:before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
        .clearfix:before,
        .clearfix:after {
            content: " ";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        body {
            background: #494A5F;
            color: #D5D6E2;
            font-weight: 500;
            font-size: 1.05em;
            font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
        }

        a {
            color: #2fa0ec;
            text-decoration: none;
            outline: none;
        }

        a:hover, a:focus {
            color: #74777b;
        }

        .container {
            margin: 0 auto;
            overflow: hidden;
        }
    </style>
    <style>
        /*
 * Basic Table Demo CSS.
 */

        /*@import url(http://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:400,700);*/

        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #e4ebeb;
            color: #636363;
            /*font-family: 'Lato', sans-serif;*/
            line-height: 1.5;
        }

        #page {
            padding: 50px 100px;
        }

        @media only screen and (max-width: 568px) {
            #page {
                padding: 50px 30px;
            }
        }

        h1,
        h2,
        h3,
        h4,
        h5 {
            line-height: 1.2;
            /*font-family: 'Montserrat', sans-serif;*/
            font-weight: normal;
        }

        h1 {
            color: #5b8e8d;
            font-size: 3rem;
            font-weight: 700;
            letter-spacing: -0.01em;
            margin-bottom: 0.75em;
            text-transform: uppercase;
        }

        @media only screen and (max-width: 568px) {
            h1 {
                font-size: 2.25rem;
            }
        }

        h2 {
            color: #82bcba;
            font-size: 1.75rem;
            margin-bottom: 0.75em;
            margin-top: 2em;
        }

        h3 {
            color: #82bcba;
            font-size: 1.25rem;
            margin-bottom: 0.75em;
            margin-top: 2em;
        }

        a,
        a:visited,
        a:active {
            color: #5b8e8d;
            text-decoration: none;
        }

        a:hover {
            color: #53bcba;
        }

        p {
            font-size: 1.125rem;
            word-break: break-word;
        }

        p.credits {
            font-size: .8125rem;
            margin-top: 6em;
        }

        @media only screen and (max-width: 568px) {
            .phone-block {
                display: block;
            }

            .phone-hide {
                display: none;
            }
        }

        code {
            background: #c6d8d8;
            border-radius: 5px;
            color: #3d6969;
            display: block;
            margin: 2em 0;
            padding: 15px;
            position: relative;
        }

        code:after {
            bottom: 5px;
            color: #e4ebeb;
            /*font-family: 'Lato', sans-serif;*/
            font-size: 1rem;
            position: absolute;
            right: 10px;
            text-transform: uppercase;
        }

        code.css:after {
            content: 'css';
        }

        code.js:after {
            content: 'js';
        }

        table {
            background: white;
            border-collapse: collapse;
            margin: 1.25em 0 0;
            width: 100%;
        }

        table tr,
        table th,
        table td {
            border: none;
            border-bottom: 1px solid #e4ebeb;
            /*font-family: 'Lato', sans-serif;*/
            font-size: .875rem;
        }

        table th,
        table td {
            padding: 10px 12px;
            text-align: left;
        }

        table th {
            background: #56a2cf;
            color: #ffffff;
            text-transform: uppercase;
        }

        table tr td {
            background: #eaf3f5;
            color: #999999;
        }

        table tr:nth-of-type(2n+2) td {
            background: #ffffff;
        }

        table.bt tfoot th,
        table.bt tfoot td,
        table.bt tbody td {
            font-size: .8125rem;
            padding: 0;
        }

        table.bt tfoot th:before,
        table.bt tfoot td:before,
        table.bt tbody td:before {
            background: #56a2cf;
            color: white;
            margin-right: 10px;
            padding: 2px 10px;
        }

        table.bt tfoot th .bt-content,
        table.bt tfoot td .bt-content,
        table.bt tbody td .bt-content {
            display: inline-block;
            padding: 2px 5px;
        }

        table.bt tfoot th:first-of-type:before,
        table.bt tfoot th:first-of-type .bt-content,
        table.bt tfoot td:first-of-type:before,
        table.bt tfoot td:first-of-type .bt-content,
        table.bt tbody td:first-of-type:before,
        table.bt tbody td:first-of-type .bt-content {
            padding-top: 10px;
        }

        table.bt tfoot th:last-of-type:before,
        table.bt tfoot th:last-of-type .bt-content,
        table.bt tfoot td:last-of-type:before,
        table.bt tfoot td:last-of-type .bt-content,
        table.bt tbody td:last-of-type:before,
        table.bt tbody td:last-of-type .bt-content {
            padding-bottom: 10px;
        }

        /*
         * Example 4:
         * Media query over js resize
         */
        @media only screen and (max-width: 568px) {
            #table-no-resize thead {
                display: none;
            }

            #table-no-resize tbody td {
                border: none !important;
                display: block;
                font-size: .8125rem;
                padding: 0;
                vertical-align: top;
            }

            #table-no-resize tbody td:before {
                background: #56a2cf;
                content: attr(data-th) ": ";
                color: white;
                display: inline-block;
                font-weight: bold;
                margin-right: 10px;
                padding: 2px 10px;
                width: 6.5em;
            }

            #table-no-resize tbody td .bt-content {
                display: inline-block;
                padding: 2px 5px;
            }

            #table-no-resize tbody td:first-of-type:before,
            #table-no-resize tbody td:first-of-type .bt-content {
                padding-top: 10px;
            }

            #table-no-resize tbody td:last-of-type:before,
            #table-no-resize tbody td:last-of-type .bt-content {
                padding-bottom: 10px;
            }
        }

        /*
         * Example 5:
         * Two axis styling
         */
        table.two-axis tr td:first-of-type {
            background: #cadde1;
        }

        @media only screen and (max-width: 568px) {
            table.two-axis tr td:first-of-type,
            table.two-axis tr:nth-of-type(2n+2) td:first-of-type,
            table.two-axis tr td:first-of-type:before {
                background: #3584b3;
                color: #ffffff;
            }

            table.two-axis tr td:first-of-type {
                border-bottom: 1px solid #e4ebeb;
            }

            table.two-axis tr td:first-of-type:before {
                padding-bottom: 10px;
            }
        }

        /*
         * Example 6:
         * Max height
         */
        .bt-wrapper.active {
            margin-top: 1.5em;
        }

        .bt-wrapper.active table {
            margin: 0;
        }


        table {
            width: 100%;
        }

        .table {
            margin: 30px 0;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e0e0e0;
        }

        .table caption {
            color: #333;
            font-style: italic;
            font-size: 85%;
            line-height: 1;
            padding: 1em 0;
            text-align: center;
        }

        .table td,
        .table th {
            border-left: 1px solid #e0e0e0;
            border-width: 0 0 0 1px;
            font-size: inherit;
            margin: 0;
            overflow: visible;
            padding: 0.5em 1em;
            font-weight: normal;
        }

        .table td:first-child,
        .table th:first-child {
            border-left-width: 0;
        }

        .table thead,
        .table tfoot {
            background-color: #f05050;
            color: #fff;
            text-align: left;
            vertical-align: bottom;
        }

        .table thead td,
        .table tfoot td,
        .table thead th,
        .table tfoot th {
            border-color: #fff;
        }

        .table td {
            background-color: transparent;
        }

        .table_striped tr:nth-child(2n-1) td {
            background-color: #ececec;
        }

        .table_bordered td {
            border-bottom: 1px solid #e0e0e0;
        }

        .table_bordered tbody > tr:last-child > td,
        .table_bordered thead > tr:last-child > td {
            border-bottom-width: 0;
        }

        .table_horizontal td,
        .table_horizontal th {
            border-width: 0 0 1px 0;
            border-bottom: 1px solid #e0e0e0;
        }

        .table_horizontal tbody > tr:last-child > td,
        .table_horizontal thead > tr:last-child > td {
            border-bottom-width: 0;
        }
    </style>
    <style>
        /*
 * jQuery Basic Table
 * Author: Jerry Low
 */

        table.bt thead,
        table.bt tbody th {
            display: none;
        }

        table.bt tfoot th,
        table.bt tfoot td,
        table.bt tbody td {
            border: none;
            display: block;
            vertical-align: top;
        }

        table.bt tfoot th:before,
        table.bt tfoot td:before,
        table.bt tbody td:before {
            content: attr(data-th) ": ";
            font-weight: bold;
            width: 6.5em;
            display: inline-block;
        }

        table.bt tfoot th.bt-hide,
        table.bt tfoot td.bt-hide,
        table.bt tbody td.bt-hide {
            display: none;
        }

        table.bt tfoot th .bt-content,
        table.bt tfoot td .bt-content,
        table.bt tbody td .bt-content {
            vertical-align: top;
        }

        .bt-wrapper.active {
            max-height: 310px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }
    </style>

</head>
<body>
<div class="container">
    <div id="page">
        <h1 align="center">注册中心</h1>

        <h2>注册中心-服务端</h2>

        <table id="table">
            <thead>
            <tr>
                <th>服务名称</th>
                <th>IP地址</th>
                <th>域名</th>
                <th>端口号</th>
                <th>启动时间</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody id="server">

            </tbody>
        </table>

        <h2>注册中心-客户端</h2>
        <table id="table-breakpoint">
            <thead>
            <tr>
                <th>服务名称</th>
                <th>IP地址</th>
                <th>域名</th>
                <th>端口号</th>
                <th>启动时间</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody id="client">

            </tbody>
        </table>


    </div>
</div>
<script crossorigin="anonymous" integrity="sha384-OhORL1bfiBqoyzpjW+0vUZ33mZ0eAsE3yqUM/7s7BFH8C1n6BsioFATPtW2HJX3R" src="https://lib.baomitu.com/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">
    /*
 * jQuery Basic Table
 * Author: Jerry Low
 */

    (function($) {
        $.fn.basictable = function(options) {

            var setup = function(table, data) {
                var headings = [];

                if (data.tableWrap) {
                    table.wrap('<div class="bt-wrapper"></div>');
                }

                var format = '';

                if (table.find('thead tr th').length) {
                    format = 'thead th';
                }
                else if (table.find('tbody tr th').length) {
                    format = 'tbody tr th';
                }
                else if (table.find('th').length) {
                    format = 'tr:first th';
                }
                else {
                    format = 'tr:first td';
                }

                $.each(table.find(format), function() {
                    var $heading = $(this);
                    var colspan = parseInt($heading.attr('colspan'), 10) || 1;
                    var row = $heading.closest('tr').index();

                    if (!headings[row]) {
                        headings[row] = [];
                    }

                    for (var i = 0; i < colspan; i++) {
                        headings[row].push($heading);
                    }
                });

                // Table Body
                $.each(table.find('tbody tr'), function() {
                    setupRow($(this), headings, data);
                });

                // Table Footer
                $.each(table.find('tfoot tr'), function() {
                    setupRow($(this), headings, data);
                });
            };

            var setupRow = function($row, headings, data) {
                $row.children().each(function() {
                    var $cell = $(this);

                    if (($cell.html() === '' || $cell.html() === '&nbsp;') && (!data.showEmptyCells)) {
                        $cell.addClass('bt-hide');
                    }
                    else {
                        var cellIndex = $cell.index();
                        var headingText = '';

                        for (var j = 0; j < headings.length; j++) {
                            if (j != 0) {
                                headingText += ': ';
                            }

                            var $heading = headings[j][cellIndex];
                            headingText += $heading.text();
                        }

                        $cell.attr('data-th', headingText);

                        if (data.contentWrap && !$cell.children().hasClass('bt-content')) {
                            $cell.wrapInner('<span class="bt-content" />');
                        }
                    }
                });
            };

            var unwrap = function(table) {
                $.each(table.find('td'), function() {
                    var $cell = $(this);
                    var content = $cell.children('.bt-content').html();
                    $cell.html(content);
                });
            };

            var check = function(table, data) {
                // Only change when table is larger than parent if force
                // responsive is turned off.
                if (!data.forceResponsive) {
                    if (table.removeClass('bt').outerWidth() > table.parent().width()) {
                        start(table, data);
                    }
                    else {
                        end(table, data);
                    }
                }
                else {
                    if ($(window).width() <= data.breakpoint) {
                        start(table, data);
                    }
                    else {
                        end(table, data);
                    }
                }
            };

            var start = function(table, data) {
                table.addClass('bt');

                if (data.tableWrap) {
                    table.parent('.bt-wrapper').addClass('active');
                }
            };

            var end = function(table, data) {
                table.removeClass('bt');

                if (data.tableWrap) {
                    table.parent('.bt-wrapper').removeClass('active');
                }
            };

            var destroy = function(table, data) {
                table.find('td').removeAttr('data-th');

                if (data.tableWrap) {
                    table.unwrap();
                }

                if (data.contentWrap) {
                    unwrap(table);
                }

                table.removeData('basictable');
            };

            var resize = function(table) {
                if (table.data('basictable')) {
                    check(table, table.data('basictable'));
                }
            };

            // Get table.
            this.each(function() {
                var table = $(this);

                // If table has already executed.
                if (table.length === 0 || table.data('basictable')) {
                    if (table.data('basictable')) {
                        // Destroy basic table.
                        if (options == 'destroy') {
                            destroy(table, table.data('basictable'));
                        }
                        // Start responsive mode.
                        else if (options === 'start') {
                            start(table, table.data('basictable'));
                        }
                        else if (options === 'stop') {
                            end(table, table.data('basictable'));
                        }
                        else {
                            check(table, table.data('basictable'));
                        }
                    }
                    return false;
                }

                // Extend Settings.
                var settings = $.extend({}, $.fn.basictable.defaults, options);

                var vars = {
                    breakpoint: settings.breakpoint,
                    contentWrap: settings.contentWrap,
                    forceResponsive: settings.forceResponsive,
                    noResize: settings.noResize,
                    tableWrap: settings.tableWrap,
                    showEmptyCells: settings.showEmptyCells
                };

                // Initiate
                table.data('basictable', vars);

                setup(table, table.data('basictable'));

                if (!vars.noResize) {
                    check(table, table.data('basictable'));

                    $(window).bind('resize.basictable', function() {
                        resize(table);
                    });
                }
            });
        };

        $.fn.basictable.defaults = {
            breakpoint: 568,
            contentWrap: true,
            forceResponsive: true,
            noResize: false,
            tableWrap: false,
            showEmptyCells: false
        };
    })(jQuery);

</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#table').basictable();
        $('#table-breakpoint').basictable({
            breakpoint: 768
        });
        $.post('/register-center/get-server',function (result) {
            console.log(result);
            if (result.serviceName != null){
                let content = "<tr><td>"+result.serviceName+"</td><td>"+result.ip+"</td><td>"+result.hostname+"</td><td>"+result.port+"</td><td>"+result.startTime+"</td><td>正常</td></tr>";
                $('#server').append(content);
            }
        });
        $.post('/register-center/get-services',function(result) {
            console.log(result);
            for (let i = 0; i < result.length; i++) {
                let content = "<tr><td>"+result[i].serviceName+"</td><td>"+result[i].serviceIp+"</td><td>"+result[i].serviceHost+"</td><td>"+result[i].servicePort+"</td><td>"+result[i].startTime+"</td><td>正常</td></tr>";
                $('#client').append(content);
            }
        })
    });
</script>
</body>
</html>